<template>
<div class="optotal">
    <div class="left-bd">
        <div class="ava">
            <img src="./img/bird.png" style="height:100%;width:100%;border-radius:50%;">
        </div>
        <h3 style="text-align: center;">用户1032</h3>
        <router-link class="b b1" to="/"><i class="fa fa-home" aria-hidden="true"></i> 首页</router-link>
        <router-link class="b b2" to="/gm"><i class="fa fa-navicon" aria-hidden="true"></i> 商品管理</router-link>
        <router-link class="b b3" to="/om"><i class="fa fa-file-o" aria-hidden="true"></i> 订单管理</router-link>
        <router-link class="b b4" to="/fm"><i class="fa fa-cny" aria-hidden="true"></i> 财务管理</router-link>
        <router-link class="b b5" to="/da"><i class="fa fa-line-chart" aria-hidden="true"></i> 数据分析</router-link>
        <router-link class="b b6" to="/sys"><i class="fa fa-cog" aria-hidden="true"></i> 系统设置</router-link>
    </div>
    <div class="heng">
            <div>
                <button class="hb"><i class="fa fa-user-o" aria-hidden="true"></i> 001</button>
            </div>
            <div>
                <button class="hb"><i class="fa fa-envelope-o" aria-hidden="true"></i> 消息</button>
            </div>
            <div>
                <button class="hb"><i class="fa fa-tasks" aria-hidden="true"></i> 任务</button>
            </div>
    </div>
    <div class="xs">
        <router-view></router-view>
    </div>
            


</div>
    
    
</template>

<script>
module.exports = {
    data() {
        return{
            
        }
    },

    methods:{

    }
}
</script>

<style>
     html,body{
        height: 100%;
        margin: 0;
    }
    .body1{
        height: 80%;
        width: 90%;
        margin-top: 10%;
    }
    .xs{
        height: 95%;
        width: 90%;
        margin-left: 10%;
        background-color: rgb(235, 218, 203);
    }
    .optotal{
        
        height: 100%;
        width: 100%;
    }
    .heng{
        height: 5%;
        width: 100%;
        background-color: rgb(211,173,120);
    }
    .left-bd{
        float: left;
        height: 100%;
        width: 10%;
        background-color: rgb(172, 113, 63);
    }
    .ava{
        height: 14%;
        width: 70%;
        border-radius: 50%;
        margin-top: 10%;
        margin-left: 15%;
        background-color: white;
    }
    .b{
        display: block;
        text-align: center;
        line-height: 96.89px;
        height: 10%;
        width: 100%;
        text-decoration:none;
        border: 0;
        font-size: larger;
        color: black;
        background-color: rgb(172,113,63);
    }
    .hb{
        float: right;
        margin: 10px;
        margin-left: 10%;
        border: 0;
        font-size: larger;
        background-color: rgb(211,173,120);
        color:aliceblue;
    }
    .b:hover{
        background-color: rgb(184, 177, 172);
    }
    .router-link-exact-active{
        background-color: rgb(184, 177, 172);
    }
</style>